<!DOCTYPE html>
<html lang="en">

<head>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/Vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/frontstage.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1320167_tr6up9ah8d.css">
    <link rel="stylesheet" type="text/css" href="/css/audio.css">
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
    <div id="songplay">
        <div class="topbar">
            <h1 class="theme">
                <img  class="logo" src="/imgs/logo.png">
            </h1>
            <ul class="theme">
                <li class="menu">
                    <a href="/">发现音乐</a>
                </li>
                <li class="menu">
                    <a :href="'/userInfo?id='+ userData.id" v-if="userData != null">我的音乐</a>
                    <a v-else @click="loginshow = true">我的音乐</a>
                </li>
            </ul>
            
            <div class="login fr" >
                <el-dropdown v-if="userData == null">
                    <img class="user-avatar" src="/imgs/头像.png">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" @click="loginshow=true">登录</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="registershow=true">注册</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown v-else>
                    <img class="user-avatar" :src="userData.picture.resourcePath">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" :href="'/userInfo?id='+ userData.id">个人主页</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="exit">退出</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        
            <div class="search fr">	
                <div class="left_park_side"></div>
                <div class="right_park_side"></div>
                <form action="#" target="#">
                    <div class="searchbody">
                        <input type="text" name="keyword"  placeholder="张敬轩"/>
                    </div>
                    <button type="submit">
                        <i class="el-icon-search"></i>
                    </button>
                </form>
            </div>
        </div>

        <div class="songPlayer" >
            <div class="player-pic">
                <img class="song-cd" src="/imgs/album.png">
                <img class="song-singer" :src="songData.albums[0].picture.resourcePath" >
            </div>
            <div class="player-content">
                <div class="player-title">
                    <span class="linhicon icon-song"></span>
                    <span>{{ songData.name }}</span>
                    <a :href="'/mvPlay?id='+ songData.mv.id" v-if="songData.mv != null">
                        <span class="linhicon icon-MV"></span>
                    </a>
                </div>
                <div class="player-info">
                    <div v-if="songData.combinations.length != 0">歌手：
                        <a :href="'/combinationInfo?id='+ item.id" v-for="item in songData.combinations">{{ item.name }} </a>
                    </div>
                    <div v-else>歌手：
                        <a v-for="item in songData.singers"  :href="'/singerInfo?id='+ item.id">{{ item.chinesename }} </a>
                    </div>
                    <div>所属专辑：<a :href="'/albumInfo?id='+ songData.albums[0].id">{{ songData.albums[0].name }}</a></div>
                    <div>
                        <el-button class="player-btn" type="primary" icon="el-icon-video-play" @click="playNow">播放</el-button>
                        <a class="plyer-xiazai" :href="songData.resourcePath" :download="songData.name"><el-button class="player-btn" icon="linhicon icon-xiazai" plain>下载</el-button></a>
                        <el-button class="player-btn" icon="el-icon-folder-add" plain>收藏</el-button>
                        <el-button class="player-btn" icon="el-icon-chat-line-square" @click="jump('#player-comment')" plain>评论</el-button>
                    </div>
                </div>
                <div class="player-lyric">
                    <textarea id="lyric-show"></textarea>
                </div>
            </div>
            <div class="player-comment" id="player-comment">
                <div class="comment-title">
                    <span class="maintitle">评论</span>
                    <span>共有{{ commentData.length }}条评论</span>
                </div>
                <div class="my-comment" v-if="userData != null"> 
                    <img :src="userData.picture.resourcePath">
                    <textarea></textarea>
                    <div class="corr">
                        <em class="arrline">◆</em>
                        <span class="arrclr">◆</span>
                    </div>
                    <el-button class="player-btn comment-btn" type="primary">评论</el-button>
                </div>
                <div class="my-comment" v-else>
                    请先登录，才可评论！
                </div>
                <div class="user-comments">
                    <div class="comment-title">
                        <span>用户评论</span>
                    </div>
                    <div class="comment-item" v-for="item in commentData">
                        <img :src="item.user.picture.resourcePath">
                        <div class="comment-content">
                            <span class="content-username">{{ item.user.username }}: </span>
                            <span>{{ item.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <my-footer></my-footer>
    </div>

    <div class="audio" ></div>
    <script src="/js/audio.js"></script>

<script type="module" th:inline="javascript">
var song = [[${song}]]
var comment = [[${comments}]]
var user = [[${user}]]
console.log(typeof([[${song}]]))
console.log(song);
console.log(comment);
var mvplay = new Vue({
    el: '#songplay',
    data() {
        return {
            songData: song,
            commentData: comment,
            userData: user,
        };
    },
    methods: {
        jump(position){
            $(position)[0].scrollIntoView();
        },
        playNow() {
            // console.log(this.songData.resourcePath)
            $(".audio").attr("song", this.songData.resourcePath);
            $('.hiddenbtn').click();
        },
        exit(){
            $.ajax({
                url: "/logout",
                type: "post",
                contentType: "application/json",
                async: false,
                success(data) {
                    window.location.href = "/";
                }
            });
        }
    },
    mounted() {
        $(document).ready(function(){
            $("#lyric-show").load(song.lyricses[0].resourcePath);
        })
    },
    components: {
        'my-footer': httpVueLoader('./vue/footer.vue')
    }
})
</script>

</body>
</html>